<template>
  <Layout>
    <Header title = '视频详情'>
      <Icon name = 'arrow-left' slot = 'left' @click="handleBack" />
    </Header>
    <Content>
      <video-player
        :options="options"
        :playsinline="true"

        ref="videoPlayer"
        class="player"
      />

      <div class="pannel">
        <h1>第二届中国医师协会神经介入年会</h1>
        <Button type = 'primary' size = 'small' class='download-btn'><Icon name = 'upgrade' />下载</Button>
        <div class="date">{{ moment(data).format('YYYY-MM-DD') }}</div>
      </div>
    </Content>
    <Footer>
      <div class="bottom-text dark"><i></i>您竟然滑到底了<i></i></div>
    </Footer>
  </Layout>
</template>

<script>

import moment from 'moment'
import Layout from '@/component/layout/index.js'
import { Icon, Button } from 'vant'

const {
  Header,
  Content,
  Footer
} = Layout

export default {

  name: 'index',

  data () {
    return {
      data: new Date().getTime(),

      options: {
        // videojs options
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: "video/mp4",
          src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
        }],
        // 预览图片
        poster: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=921941047,3804246164&fm=26&gp=0.jpg",
      }
    }
  },

  methods: {
    moment,
    handleBack: function (e) {
      this.$router.go(-1)
    },
    handleClick: function (v, i, e) {
      console.log(v)
    }
  },

  components: {
    Layout,
    Header,
    Footer,
    Content,
    Icon,
    Button,
  }
}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.player {
  width: 100%;
  height: 210px;
  position: relative;

  /deep/ .video-js {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;

    .vjs-big-play-button {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .vjs-poster {
      background-size: cover;
    }
  }
}

.pannel {
  padding: 26px 20px;

  h1 {
    font-size: 20px;
    color: #262626;
    margin-bottom: 26px;
    text-align: left;
    line-height: 1.15;
  }

  .download-btn {
    background-color: #0BB375;
    border-color: #0BB375;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    margin-bottom: 27px;

    i {
      transform: rotate(180deg);
      margin-right: 3px;
      vertical-align: -2px;
    }
  }

  .date {
    font-size: 14px;
    color: #777;
  }
}

</style>